<template>
    <div class="common-layout">
        <el-config-provider :size="size" :locale="locale=='zh'?zhCn:en">
            <el-container>
                <!-- 左边部分 -->
                <el-aside width="auto" height="100vh">
                    <el-scrollbar height="100vh">
                        <!-- 左侧菜单栏组件 -->
                        <LfetMenu :is-Collapse="isCollapse"></LfetMenu>
                    </el-scrollbar>
                </el-aside>
                <!-- 右边部分 -->
                <el-container>
                    <el-header>
                        <div class="header-nva">
                            <!-- 头部面包屑 
                                    子组件传递了一个属性过来
                                -->
                            <div class="header-nva-left">
                                <HeaderCrumbs @change-collapse="isCollapse = $event"></HeaderCrumbs>
                            </div>
                            <div class="header-nva-rigth">
                                 <!-- 全屏切换 -->
                                <ScreenFull />
                                <el-divider direction="vertical" />
                                   <!-- 字体切换 
                                        子组件传递了一个属性过来
                                    -->
                                <SizeChange @change-size="size=$event"></SizeChange>
                                <el-divider direction="vertical" />
                                 <!-- 换肤 -->
                                 <ThemPicker></ThemPicker>
                                <el-divider direction="vertical" />
                                <!-- 中英文切换 -->
                                 <I18n />
                                <el-divider direction="vertical" />
                                <UserHeader />
                            </div>
                        </div>
                        <!-- 标签页 -->
                        <div class="tag-list">
                            <div class="navHistory" @mousewheel="handleSlideMouse" ref="tag">
                                <HeaderTags />
                            </div>
                        </div>
                    </el-header>
                    <el-main>
                        <RouterView />
                    </el-main>
                </el-container>
            </el-container>
        </el-config-provider>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import LfetMenu from "@/components/navigation/LfetMenu.vue"; //左侧菜单栏组件
import HeaderCrumbs from '@/components/navigation/HeaderCrumbs.vue' //头部面包屑
import HeaderTags from "@/components/navigation/HeaderTags.vue";  //标签页
import ScreenFull from '@/components/screenfull/ScreenFull.vue'  //全屏组件
import SizeChange from '@/components/sizechange/SizeChange.vue'  //字体切换组件
import ThemPicker from '@/components/thempicker/ThemPicker.vue'  //换肤组件
import I18n from "@/components/i18n/I18n.vue";
import UserHeader from "@/components/userheader/UserHeader.vue";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
//菜单是否折叠
const isCollapse = ref(false)
const tag = ref() //获取navHistory标签的引用
//如果存储有值就从存储拿没有就给它一个默认值
let size = ref(localStorage.getItem("size") || "default")
console.log(size.value);
const changeSize = (_size: string) => {
    size.value = _size
}
//滑动鼠标滚轮实现横向滚动
const handleSlideMouse = (e: { wheelDelta: number; }) => {
    const scrollLeft = tag.value.scrollLeft; //获取tag的引用对象向左滚动的距离
    const offsetWidth = tag.value.offsetWidth; //获取tag的引用对象当前的宽度
    const scrollWidth = tag.value.scrollWidth; //获取tag的引用对象的可滚动宽度 (相当与整个盒子可以滚动的距离,overflow时也能获取)
    //判断鼠标是向上还是向下滚动
    if (e.wheelDelta < 0 && scrollLeft + offsetWidth < scrollWidth) {
        tag.value.scrollLeft = tag.value.scrollLeft + 100;    //小于0则是向下滚动
    } else if (e.wheelDelta > 0 && scrollLeft > 0) {   //大于0则是向上滚动
        tag.value.scrollLeft = tag.value.scrollLeft - 100;   
    }
}
</script>
<style lang="less" scoped>
.common-layout {
    width: 100%;
    height: 100vh;
    overflow: hidden;

    .el-header {
        height: 120px;
        padding: 0px;

        .header-nva {
            min-height: 60px;
            display: flex;
            margin-left: 20px;
            align-items: center;
            justify-content: space-between;

            .header-nva-left {
                display: flex;
                width: 100%;
                align-items: center;
            }

            .header-nva-rigth {
                display: flex;
                margin-right: 20px;
                .el-divider {
                    margin-top: 7px;
                }
            }
        }

        .tag-list {
            height: 60px;
            width: 100%;
            display: flex;
            align-items: center;
            padding-left: 12px;
            border: 1px solid #d8d9db;

            .navHistory {
                display: flex;
                overflow: hidden;
            }
        }
    }
    .el-main {
       padding: 0px;
       padding-left: 20px;
       margin-top: 5px;
    }
}
</style>